<template>
	<div class="index">
      <div style=" height: 20px; position: relative; box-sizing: border-box; width: 100%; border-radius: 10px; margin-bottom: 10px; overflow: hidden; cursor: pointer;" ref="kuandudiv">
      	<div @mousedown="enxia($event)" @mouseup="songkai($event)" @mousemove="tuodong($event)" @mouseout="yichu($event)"  :style="{width:kuandu2}"
        style="background: #ccc; height: 18px; border-radius: 9px; position: absolute; left: 0; top: 0;" ref="divs" ></div>
      </div>
	</div>
</template>

<script>

	export default{
		name: 'index',
    props:['kuandu'],
		data(){
			return{
        x:0,
        ade:false,
        kuandu2:0
			}
		},
		created() {

		},
    mounted() {
      console.log(this.kuandu)
      this.$refs.kuandudiv.addEventListener('click',this.dianji)
      this.kuandu2 = this.$refs.kuandudiv.offsetWidth / this.kuandu * this.$refs.kuandudiv.offsetWidth +'px'
    },
		methods:{
      yidong:function(i){
        console.log(i,this.$refs.kuandudiv.offsetWidth)
        this.$refs.divs.style.left = this.$refs.kuandudiv.offsetWidth * i +'px'
      },
      enxia:function(e){
      	//获取X，Y的坐标
      	this.x = e.clientX;
      	this.ade = true;

        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue = false;
        }
      },

      songkai:function(e){
        this.$refs.kuandudiv.removeEventListener('click',this.dianji)
      	this.ade = false;
        setTimeout(()=>{
          this.$refs.kuandudiv.addEventListener('click',this.dianji)
        },100)
      },


      dianji:function(e){
        if(e.offsetX - this.$refs.divs.offsetWidth > 0){
          this.$refs.divs.style.left = e.offsetX - this.$refs.divs.offsetWidth + 'px'
          this.x = e.offsetX - this.$refs.divs.offsetWidth
        }
        if(e.offsetX - this.$refs.divs.offsetWidth < 0){
          this.$refs.divs.style.left = e.offsetX + 'px'
          this.x = e.offsetX
        }

        let baifenbi = this.$refs.divs.offsetLeft / this.$refs.kuandudiv.offsetWidth
        this.$emit('baifenbi',baifenbi)

      },
      tuodong:function(e){

      	if(this.ade){

      		let fw = this.$refs.divs.parentNode.offsetWidth
      		let le = e.clientX - this.x
      		if(this.$refs.divs.offsetLeft + le > 0 && this.$refs.divs.offsetWidth + this.$refs.divs.offsetLeft + le < fw){
      			this.$refs.divs.style.left = this.$refs.divs.offsetLeft + le +'px'
      			this.x = e.clientX
      		}else{
      			if(this.$refs.divs.offsetLeft + le < 0){
      				this.$refs.divs.style.left = 0 + 'px'

      			}
      			if(this.$refs.divs.offsetWidth + this.$refs.divs.offsetLeft > fw){
      				this.$refs.divs.style.left  = fw - this.$refs.divs.offsetWidth + 'px'

      			}
      		}
      		let baifenbi = this.$refs.divs.offsetLeft / this.$refs.divs.parentNode.offsetWidth

          this.$emit('baifenbi',baifenbi)
      		// this.$refs.divreal.scrollLeft = 1000 * baifenbi
      	}
      },
      yichu:function(e){
      	this.ade = false;
      }
		}
	}
</script>

<style lang="scss" scoped>
	.index{
    border-radius: 10px;
	}
</style>
